<template>
  <div class="jineng">
    <div class="details">学情雷达-技能</div>
    <div class="Score-increase-jineng">
      <div class="echatys-jineng">
        <!-- 雷达图3 -->
        <Leida2 :klScoreLev="klScoreLev" />
      </div>
      <div class="echatys-rig-jineng">
        <div class="nulecenter">
          <!-- <div class="nulecenter-text">
            预测第一提分空间 <span class="nulecenter-span"> 52</span> 分
          </div> -->
          <div class="nulecenter-body">
            知识(具有事实、概念或程序性质的有组织信息体，是教学中传授与传承的内容):根技(用身体、语言或智力操作信息或事物的熟练程度，是教育或教学应完成的目标，表现是学生练习与训后结果):根据受测学生在方法层面的长短板、与平均水平相比的优劣势，可以分析出，学生能使用哪些方法来解题?能否做到熟练使用这些方法?
            <br />
            <span class="nulecenter-span">关注哪些方法不够熟练掌握 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="tablelistage">
      <table class="custom-tablelist" :style="{ 'border-collapse': 'collapse' }">

        <thead>
          <tr>
            <th class="th-dimension" style="border: 1px solid #e8e8e8; padding: 8px;" rowspan="2">维度</th>
            <th colspan="3" style="border: 1px solid #e8e8e8; padding: 8px;">得分率（%）</th>
            <th class="th-feature" style="border: 1px solid #e8e8e8; padding: 8px; position: sticky; right: 0;"
              rowspan="2">特点</th>
          </tr>
          <tr>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">本人</th>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">群体</th>
            <th style="border: 1px solid #e8e8e8; padding: 8px;">差值</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in tableData" :key="item.KlName">
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.SkillName }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.Score }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.TotalScore }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px;">{{ item.birthday }}</td>
            <td style="border: 1px solid #e8e8e8; padding: 8px; position: sticky; right: 0;"
              :style="{ color: getColor(item.namelist) }">
              {{ item.namelist }}
            </td>
          </tr>
        </tbody>
      </table>
      <!-- <a-table
      :columns="columns"
      :pagination="false"
      :data="tableData"
      :bordered="{ cell: true }"
    /> -->
      <div class="table-text">长短板：学生在知识、技能、能力各分项指标中得分率较高的为长板，得分率较低的为短板。</div>
      <div class="table-text">优劣势：学生在知识、技能、能力各分项指标中得分率高于群体（常模）为优势，低于群体（常模）为劣势。</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Leida2 from "./echarts/leida2.vue";
import { reactive, ref } from "vue";
const props = defineProps<{
  skillLev: [];
}>();
const klScoreArr = ref<number[]>([]);

if (props.skillLev) {
  props.skillLev.map((item, index) => {
    // klScoreArr.push( (item.Score/item.TotalScore)*10000)
    klScoreArr.value.push(
      Math.round((Number(item.Score) / Number(item.TotalScore)) * 10000)
    );
  });
}
const getColor = (text: any) => {
  if (text.includes('长处') || text.includes('优势')) {
    return 'green';
  } else if (text.includes('短板') || text.includes('劣势')) {
    return '#FF9851';
  }
  return 'black';
};
let klScoreMin = Math.min(...klScoreArr.value);
let klScoreMax = Math.max(...klScoreArr.value);
// 处理数据，计算差值
const tableData = ref(
  props.skillLev.map((item: any) => {
    return {
      ...item,
      Score: ((item.Score / item.TotalScore) * 100).toFixed(2).replace(/\.?0+$/, ''),
      TotalScore: ((item.Avg * 100) / item.TotalScore).toFixed(2).replace(/\.?0+$/, ''),
      birthday: (((item.Score / item.TotalScore) * 100) - ((item.Avg * 100) / item.TotalScore)).toFixed(2).replace(/\.?0+$/, ''),
      namelist: `${Math.round((item.Score / item.TotalScore) * 10000) <= klScoreMin
          ? "短板"
          : Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? "长板"
            : ""
        }  ${Math.round((item.Score / item.TotalScore) * 100) -
          Math.round((item.Avg / item.TotalScore) * 100) >
          0
          ? Math.round((item.Score / item.TotalScore) * 10000) <=
            klScoreMin ||
            Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? " + 优势"
            : "优势"
          : Math.round((item.Score / item.TotalScore) * 10000) <=
            klScoreMin ||
            Math.round((item.Score / item.TotalScore) * 10000) >= klScoreMax
            ? " + 劣势"
            : "劣势"
        }      
      `,
    };
  })
);

// const tableData = ref(
//   props.skillLev.map((item: any) => {
//     return {
//       ...item,
//       birthday: item.ScoreRate - item.TotalScore,
//     };
//   })
// );
const columns = [
  {
    title: "维度",
    dataIndex: "SkillName",
  },
  {
    title: "得分率（%）",
    children: [
      {
        title: "本人",

        dataIndex: "Score",
      },
      {
        title: "群体",
        dataIndex: "TotalScore",
      },
      {
        title: "差值",
        dataIndex: "birthday",
      },
    ],
  },
  {
    title: "特点",
    dataIndex: "namelist",
    fixed: "right",
  },
];

const klScoreLev = reactive({
  indicatorname: [],
  all: [],
  mine: [],
});

props.skillLev.map((item: any) => {
  klScoreLev.indicatorname.push({ name: item.SkillName });
  klScoreLev.all.push(((item.Score / item.TotalScore) * 100).toFixed(2).replace(/\.?0+$/, ''));
  klScoreLev.mine.push(((item.Avg * 100) / item.TotalScore).toFixed(2).replace(/\.?0+$/, ''));
});
</script>
<style lang="less" scoped>
.details {
  width: 100%;
  font-weight: 500;
  font-size: 17px;
  color: #03305c;
  text-decoration: underline;
  text-decoration-color: #0075ff;
}


.tablelistage {
  margin-top: 1vw;
  //  max-height: 500px;
}

.custom-tablelist {
  width: 100%;
  margin-top: 16px;
  font-family: 'Arial', sans-serif;
}

// .jineng{
//  height: 100%;
//   background-color: pink;
// }
.table-text {
  margin-top: 10px;
  text-align: left;
  font-size: 13px;
}

.Score-increase-jineng {
  margin-top: 1vw;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.echatys-jineng {
  width: 50%;
  height: 60vh;
  border: 1px solid #ededed;

  img {
    width: 100%;
    height: 100%;
  }
}

.echatys-rig-jineng {
  width: 49%;
  //   background-color: pink;
  text-align: left;
}

.nulecenter {
  margin: 25% 15% 0 15%;
  font-size: 0.8vw;
}

.nulecenter-text {
  width: 15vw;
  font-weight: 500;
  font-size: 1.3vw;
  color: #03305c;
  text-align: left;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.nulecenter-body {
  margin-top: 10px;
  line-height: 22px;
  font-size: 16px;
  background-color: #fff;
}

.nulecenter-span {
  color: #fb6d30;
  //   font-size: 1.8vw;
}

@media (max-width: 735px) {
  .echatys-jineng {
    width: 100%;
    height: 60vh;
    border: 1px solid #ededed;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .echatys-rig-jineng {
    width: 100%;
    //   background-color: pink;
    text-align: left;
  }
}
</style>
